import {useRef, useEffect, useState, useMemo} from 'react';
import {useFrame} from '@react-three/fiber';
import * as THREE from 'three';

export default function Polyhedron({position, polyhedron}) {
  const ref = useRef(null);
  const [count, setCount] = useState(0);

  useEffect(() => {
    // console.log('Box position: ', ref.current.name, ref.current.position);
    console.log('Box uuid: ', ref.current.geometry.uuid);
  }, [ref.current]);

  useFrame((state, delta) => {
    if (ref.current) {
      ref.current.rotation.x += delta;
      ref.current.rotation.y += 0.5 * delta;
    }
  });

  const onClick = (e) => {
    setCount((count + 1) % 3);
  };

  return (
    <mesh
      ref={ref}
      position={position}
      onPointerDown={onClick}
      geometry={polyhedron[count]}
    >
      <meshBasicMaterial color={0xff0000} wireframe={true}/>
    </mesh>
  );
}
